<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <h2 v-if="true">
      {{message}}
    </h2>

    <hr>

    <button @click="btnClick">{{isShow? '隐藏': '显示'}}</button>
    <h2 v-if="isShow">
      {{message}} 2222
    </h2>
    <h1 v-else>走你</h1>

    <!-- 下面说明了， v-if 和 v-else应该是同级 使用 -->
    <h2 v-if="isShow">
      {{message}} 2222
      <p v-else>你说 走你</p> <!-- 注意这里 -->
    </h2>
    <h3 v-else>走你</h3>
  </div>

  <script src='../../js/vue.js'></script>
  <script>
    new Vue({
      el: '#app',
      data: {
        message: '哈哈哈哈',
        isShow: false,
      },
      methods: {
        btnClick() {
          this.isShow = !this.isShow;
        }
      }
    })
  </script>
</body>
</html>